<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博秀</title>
    <link rel="stylesheet" href="css/web.css">
    <script src="js/jquery-3.3.1/jquery-3.3.1.min.js" ></script>
    <script src="js/jquery-3.3.1/jquery.mousewheel.min.js" ></script>
</head>
<body>
<!--整个主体-->
    <div id="bg_wrap">
        <!--上方部分-->
        <div id="f_top">
            <div class="f_left">
                <a>
                    <img src="img/7edba6f4ly1gha1hw5p87j205k05kgm9.jpg">
                </a>
            </div>
            <div class="f_right">
                <dl>
                    <dt>
                        <a>我的世界中文论坛</a>
                        <span></span>
                    </dt>
                    <dd>
                        <span>海外</span>
                    </dd>
                </dl>
                <p>
                    <a>
                        <span class="b_bg">
                            <span class="bg"></span>
                            <span>加关注</span>
                        </span>
                    </a>
                </p>
            </div>
        </div>
        <!--下方内容部分-->
        <div class="centent">
            <div class="centent_c">
                <div class="centent_show">
                    <!--滚动条-->
                    <div class="scroll_centent">
                        <div class="bg_scroll">
                        </div>
                    </div>
                    <ul>
                        <li>
                            <div class="main_centent">
                                <p class="main_txt">
                                    #Minecraft# 飞机 ​
                                </p>
                                <div class="main_img">
                                    <a><img src="img/7edba6f4ly1ghwc6utld4j20ic0ij46p.jpg"></a>
                                </div>
                                <p class="main_b">
                                    <span class="time">
                                        <a>8月19日 19:18</a>
                                    </span>
                                    <span class="more">
                                        <a>转发</a>
                                        <em>|</em>
                                        <a>评论</a>
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="main_centent">
                                <p class="main_txt">
                                    该混搭包售价1340金币，折合约60人民币。玩家需要在游戏中合成并训练恐龙，建造展览，管理公园并开门营业，利用载具和NPC团队解决南图，或者外出冒险，寻找恐龙DNA，看看你能开放多久，并拿到最高分。混搭包包含了21个皮肤和60多种不 ​
                                </p>
                                <p class="main_b">
                                    <span class="time">
                                        <a>8月19日 19:18</a>
                                    </span>
                                    <span class="more">
                                        <a>转发</a>
                                        <em>|</em>
                                        <a>评论</a>
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="main_centent">
                                <p class="main_txt">
                                    澄清一个误区，Minecraft 在微软商店的 Win10 版本并不是网易代理的。

                                    最近发现有不少人询问，在微软商店购买 Win10 版本的 Minecraft 和 Minecraft 地下城时，发现收款方的名称为网易旗下的一个公司，于是以为在在微软商店购买的游戏也是网易盈利或者代理的。（图一）

                                    其实不是这样，如果仔细看看就 ​
                                </p>
                                <div class="main_img">
                                    <a><img src="img/7edba6f4ly1ghv5zf008tj218w0jl43j.jpg"></a>
                                </div>
                                <p class="main_b">
                                    <span class="time">
                                        <a>8月19日 19:18</a>
                                    </span>
                                    <span class="more">
                                        <a>转发</a>
                                        <em>|</em>
                                        <a>评论</a>
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="main_centent">
                                <p class="main_txt">
                                    #Minecraft# 微软商城提前泄露了基岩版与侏罗纪公园的联动混搭包

                                    该混搭包可能会在近期公布，并上架基岩版商城，售价的话，应该不低... ​
                                </p>
                                <div class="main_img">
                                    <a><img src="img/7edba6f4ly1ghv5b7zg7rj208a04qtay.jpg"></a>
                                </div>
                                <p class="main_b">
                                    <span class="time">
                                        <a>8月19日 19:18</a>
                                    </span>
                                    <span class="more">
                                        <a>转发</a>
                                        <em>|</em>
                                        <a>评论</a>
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="main_centent">
                                <p class="main_txt">
                                    #Minecraft# 去附魔的你 ​ ​
                                </p>
                                <div class="main_img">
                                    <a><img src="img/7edba6f4ly1ghv4o6ezd6j20r20xcn0j.jpg"></a>
                                </div>
                                <p class="main_b">
                                    <span class="time">
                                        <a>8月19日 19:18</a>
                                    </span>
                                    <span class="more">
                                        <a>转发</a>
                                        <em>|</em>
                                        <a>评论</a>
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="main_centent">
                                <p class="main_txt">
                                    #Minecraft# 这是reddit网友Persnickety_Playz制作的一组非官方的群系更新概念图，前5个是根据官方公布的更新计划制作的，后7个完全是作者的脑洞设计了。

                                    1. 山地更新。Minecon2019投票胜出的群系，计划今年年底更新。更新内容包括：山羊、可以陷入的深雪、地形与景色升级。
                                    2. 沼泽更新。Minecon2019 ​
                                </p>
                                <div class="main_img">
                                    <a><img src="img/7edba6f4ly1ghu8e316uuj21hc0u0npd.jpg"></a>
                                </div>
                                <p class="main_b">
                                    <span class="time">
                                        <a>8月19日 19:18</a>
                                    </span>
                                    <span class="more">
                                        <a>转发</a>
                                        <em>|</em>
                                        <a>评论</a>
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="main_centent">
                                <p class="main_txt">
                                    #Minecraft# 飞机 ​
                                </p>
                                <div class="main_img">
                                    <a><img src="img/7edba6f4ly1ghwc6utld4j20ic0ij46p.jpg"></a>
                                </div>
                                <p class="main_b">
                                    <span class="time">
                                        <a>8月19日 19:18</a>
                                    </span>
                                    <span class="more">
                                        <a>转发</a>
                                        <em>|</em>
                                        <a>评论</a>
                                    </span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    /**鼠标滚动事件**/
    var $ct=$(".centent_c ul");
    var $show=$(".centent_show");
    var $s_h=$(".scroll_centent");
    var $s_btn=$(".bg_scroll");
  var cont=$ct.height();//总高度
  var show_h=$show.height();//窗口高度
  var scr_h=$s_h.height();//滚动条的高度
    var s_btn_h=parseInt((show_h/cont)*scr_h);
    $s_btn.height(s_btn_h);
    //滚动条拖动事件
    var t_h=0;
        $s_btn.mousedown(function (event) {
            t_h = event.pageY - $(this).position().top;

            if(this.setCapture)
            {
                $(this).mousemove(function(event) {
                    tSbtnh(event.pageY - t_h);
                });
                    this.setCapture(); //设置捕获范围
                $s_btn.mouseup(function() {
                    $(this).unbind('mousemove mouseup');
                    this.releaseCapture(); //取消捕获范围
                })
            }
            else {
                $(document).mousemove(function(event) {
                    tSbtnh(event.pageY-t_h);
                });
                $(document).mouseup(function(){
                    $(document).unbind('mousemove mouseup');
                });
            }
    })
    //设置滚动按钮位置，
    function tSbtnh (bh){
            var martop=-parseInt((cont-show_h)/(scr_h-s_btn_h)*bh);
        if(bh<0)
        {
            $s_btn.css("top",0+"px");
            }else if(bh>scr_h-s_btn_h) {
            $s_btn.css("top",scr_h-s_btn_h+"px");
        }else {
            $s_btn.css("top",bh+"px");
            $ct.css("margin-top",martop+"px");
        }
    }
    var onbtny1;
    var onbtny2;
    setInterval(function () {
        onbtny1=$s_btn.offset().top;
         onbtny2=onbtny1+$s_btn.height();
    },100);
    $s_h.mousedown(function (event) {
        var onbtn=0;
        if(event.pageY>=onbtny1&&event.pageY<=onbtny2){
            console.log(event.pageY+";"+onbtny1+";"+onbtny2);
            return false;
        }
        onbtn=parseInt(event.pageY-$s_h.offset().top);
        console.log(onbtn);
        tSbtnh(onbtn);
    })
    $s_h.click(function(event) {
        event.stopPropagation();
    });
   var g=20;
    //if ($show[0].addEventListener) { //火狐浏览器
     //   $show[0].addEventListener("DOMMouseScroll", fnMouseWheel);
    //}
    //$show[0].onmousewheel = fnMouseWheel; // 其他浏览器
    //鼠标滚轮事件处理函数
    //function fnMouseWheel(e) {
    //   var evt = e || window.event;
    //  var wheelDelta = evt.wheelDelta || evt.detail; //鼠标滚动值，可由此判断鼠标滚动方向
    //  if (wheelDelta == -120 || wheelDelta == 3) tSbtnh($s_btn.position().top +g );
    //  else if (wheelDelta == 120 || wheelDelta == -3) tSbtnh($s_btn.position().top - g);
    // }
    $show.bind(
        "mousewheel",function(event,delta)
        {
            event.preventDefault();
            if (delta< 0) tSbtnh($s_btn.position().top + g);
            else tSbtnh($s_btn.position().top - g);
        }
    );


</script>
</body>
</html>